<template>
    <el-dialog :close-on-click-modal="false" :title="titleMap[mode]" v-model="visible" :width="650" destroy-on-close
        @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="80px"
            label-position="right">
            <el-form-item label="名称" prop="name">
				<el-input v-model="form.name" placeholder="请输入名称" clearable maxlength="50" show-word-limit></el-input>
			</el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="form.sort" placeholder="请输入排序" clearable show-word-limit></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    emits: ['success', 'closed'],
    props: {
        parentId: {
            type: Number,
            default: () => {
                return 0
            }
        },
    },
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增课程类型',
                edit: '编辑课程类型',
                show: '查看'
            },
            visible: false,
            isSaveing: false,
            //表单数据
            form: this.getDefaultRuleForm(),
            //验证规则
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                sort: [
                    {
                        required: false,
                        validator: (rule, value, callback) => {
                            var myreg = /^(-|[0-9])\d*$/;
                            if (!value) {
                                callback(new Error('请输入排序'))
                            } else if (!myreg.exec(value)) {
                                callback(new Error('只能输入整数'))
                            } else {
                                callback()
                            }
                        }
                    },
                ]
            },
        }
    },
    mounted() {
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (!valid) {
                    return false
                }

                let data = {}
                for (let key in this.form) {
                    data[key] = this.form[key]
                }

                try {
                    this.isSaveing = true;
                    if (this.form.id) {
                        await this.$API.course.category.action.put(data)
                    } else {
                        await this.$API.course.category.action.post(data)
                    }
                    this.$emit('success', this.form, this.mode)
                    this.visible = false;
                    this.$notify.success("保存成功")
                } finally {
                    this.isSaveing = false;
                }
            })
        },
        //表单注入数据
        setData(data) {
            let _form = {
                id: data.id,
                name: data.name,
                sort: data.sort + ''
            }
           
            this.form = _form
            return this
        },
        getDefaultRuleForm() {
            return {
                id: null,
                name: '',
                sort: '0'
            }
        },
    }
}
</script>

<style>
</style>
